<template>
  <div class="public-welfare home">
    <div class="mescroll"  ref="mescroll">
      <div class="top">
        <p class="top-title">凝聚 <span>{{total}}</span> 份爱心</p>
        <swiper :options="bannerHome">
          <swiper-slide class="swiper-demo-img" v-for="(item, index) in banner" :key="index">
            <a :href="item.url" v-if="item.url"><img :src="item.img"></a>
            <span class="img" v-else><img :src="item.img"></span>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <div class="flex">
          <p class="left" @click="router({path: './myWelfare'})">
            <img src="@/assets/gongyi02.png" alt="">
            <span>捐赠项目</span>
          </p>
          <p class="right" @click="router({path: './welfareList'})">
            <img src="@/assets/beibu.png" alt="">
            <span>我的捐赠</span>
          </p>
        </div>
      </div>    
      <div class="section">
        <div class="section-top clear">
          <span class="title">公益项目</span>
          <span class="tip">伸仁爱之手</span>
          <span class="more" @click="router({path: './welfareProList'})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
        </div>
        <div class="list">
          <div v-for="item in welfare" class="item" @click="router({path: './welfarePro',query:{id:item.id}})">
            <span class="img"><img :src="item.img" alt=""></span>
            <p class="title">{{item.title}}</p>
            <div class="cons">
              <div class="item-con">
                <p class="num">{{item.money}}</p>
                <p class="text">用户捐款(元)</p>
              </div>
              <div class="item-con">
                <p class="num">{{item.times}}</p>
                <p class="text">爱心(份)</p>
              </div>
              <div class="item-con">
                <p class="num">{{item.day}}</p>
                <p class="text">项目天数</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section border-none">
        <div class="section-top clear">
          <span class="title">公益新闻</span>
          <span class="tip">慈善暖人心</span>
          <span class="more" @click="router({path:'./welfareNewsList'})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
        </div>
        <news-list :newsLists="newLists"></news-list>
      </div>
      <div class="section border-none">
        <div class="section-top clear">
          <span class="title">公益公示</span>
          <span class="tip">共建慈善事业</span>
        </div>
        <div class="notice">
          <div v-for="item in notice" class="item" @click="router({path: './welfareNotice',query:{id:item.id}})">
            <img :src="item.img" alt="">
            <p class="notice-title">{{item.title}}</p>
            <p class="time">{{item.create_time}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {welfare, notice} from '@/api/api'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { commonShare } from "@/config/wxshare"

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        total:0,
        banner:[],
        welfare:[],
        notice:[],
        newLists: [],
        mescroll: null, //mescroll实例对象
      }
    },
    created () {
      this.welfares()
    },
    //实例化上拉加载
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      welfares () {
        welfare().then((res) =>{
          this.total=res.data.data.total
          this.banner=res.data.data.banner
          this.welfare=res.data.data.welfare
          for(var i in res.data.data.news){
            res.data.data.news[i].type = "welfare"
            this.newLists.push(res.data.data.news[i])
          }          
          commonShare('', '智慧宝公益', '善举的力量，为善行者助力');
        }).catch((err) => {
          console.dir(err)
        })
      },
      upCallback (page) {
        notice(page.num, this.rows).then((res) => {
          if (page.num == 1){
            this.notice = []
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data.list);
          })
          this.notice = this.notice.concat(res.data.data.list)
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.public-welfare
  background-color #f5f5f5
  min-height 100vh
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    padding-bottom 5rem
    box-sizing border-box
    .top
      background-color #fff
      margin-bottom 1rem
      .img
        display flex
        height 16.3rem
        img
          object-fit cover
      .top-title
        line-height 5rem
        height 5rem
        text-align center
        font-size 1.3rem
        color #666
        span
          font-size 2rem
          color #172F6D
          font-weight bold    
      .swiper-demo-img
        padding 1rem 1.5rem
        box-sizing border-box
      .swiper-ad-img
        padding 0
      .flex
        display flex
        height 4.5rem
        line-height 4.5rem
        text-align center
        p
          flex 1
          font-size 1.5rem
          color #333
          span
            display inline-block
            vertical-align middle
          img
            display inline-block
            vertical-align middle
            width 1.8rem
            margin-right .5rem
        .right
          position relative
          &::after
            content ''
            position absolute
            left 0
            height 60%
            top 20%
            width 1px
            background-color #e6e6e6
    .section
      background-color #fff
      padding 0 1.5rem
      border-bottom 1px solid #E6E6E6
      .section-top
        padding-top 3rem
        padding-bottom 2rem
        .title
          color #333
          font-size 1.8rem
          line-height 1.8rem
          font-weight bold
        .tip
          font-size 1.3rem
          color #999
          margin-left 1rem
          line-height 1.3rem
        .more
          color #999
          font-size 1.3rem
          line-height 1.3rem
          float right
          position relative
          padding-right 1rem
          .arrow
            width .4rem
            position absolute
            right 0
            top .3rem
      .news
        padding 0
      .item
        margin-bottom 3rem
        .img
          display flex
          height 16.3rem
          img
            object-fit cover
        .title
          line-height 5rem
          height 5rem
          font-size 1.7rem
          color #333
          font-weight 800
        .cons
          background-color #FAFAFA
          display flex
          border-bottom .2rem solid #172F6D
          padding 1.8rem 0
          border-radius: .6rem .6rem 0px 0px;
          .item-con
            flex 1
            text-align center
            .text
              font-size 1.2rem
              color #999
              line-height 1.2rem
              height 1.2rem
            .num
              font-size 1.7rem
              color #000
              font-weight bold
              line-height 1.7rem
              height 1.7rem
              margin-bottom 1rem
      .notice
        .item
          &:last-child
            padding-bottom 3rem
            margin-bottom 0
          .notice-title
            color #333
            font-size 1.7rem
            height 1.7rem
            line-height 1.7rem
            font-weight 800
            margin-top 2rem
          .time
            color #999
            font-size 1.2rem
            line-height 1.8rem
            margin-top .6rem
    .border-none
      border none
</style>
